JavaScript 模块化（ES Modules）

ES Modules 是 JavaScript 官方模块标准，支持静态分析和 tree-shaking。

导出语法

命名导出

JavaScript

// 单个导出
export const name = 'Alice';
export function greet() { return 'Hello'; }
export class Person {}

// 批量导出
const age = 25;
const job = 'Engineer';
export { age, job };

// 重命名导出
export { age as userAge };

默认导出

JavaScript

export default function() {
  console.log('Default export');
}

// 等价于
function main() {}
export default main;

导入语法

命名导入

JavaScript

import { name, greet } from './module.js';
import { age as userAge } from './module.js';  // 重命名
import * as utils from './module.js';          // 全部导入

默认导入

JavaScript

import main from './module.js';
import main, { name, greet } from './module.js';  // 混合导入

动态导入

JavaScript

// 返回 Promise
const module = await import('./module.js');

// 条件加载
if (condition) {
  const { heavyFeature } = await import('./heavy.js');
}

导出导入结合

JavaScript

// 全部重新导出
export * from './utils.js';

// 部分重新导出
export { name, greet } from './module.js';

// 重命名导出
export { age as userAge } from './module.js';

模块特性

特性	说明
严格模式	自动启用 `'use strict'`
作用域	模块内独立作用域，不污染全局
this 值	模块顶层 `this` 为 `undefined`
执行时机	导入的模块仅执行一次

循环依赖处理

JavaScript

// a.js
import { b } from './b.js';
export const a = 'a';

// b.js
import { a } from './a.js';
export const b = 'b';

循环依赖时，ES Modules 保留导入值的引用，但未初始化时访问会报错

浏览器中使用

HTML

<script type="module" src="./main.js"></script>
<script type="module">
  import { greet } from './utils.js';
  greet();
</script>

要点总结

export 导出，import 导入，语法静态可分析
默认导出每个模块仅一个，命名导出可有多个
动态导入 import() 返回 Promise，按需加载
模块自动严格模式，顶层 this 为 undefined